<template>
    <div>
        <el-space>
            <div> 画布大小

                X<el-input-number :controls="false" size="small" v-model="store.canvasInfo.x" />
                Y<el-input-number :controls="false" size="small" v-model="store.canvasInfo.y" />


                <!-- cannvas预览 -->
                <el-button type="primary" @click="lookCanvas">预览canvas</el-button>

                <!-- 弹框  -->
                <el-dialog v-model="dialogVisible" title="预览canvas">
                    <img :src="img" alt="" class="canvas_img">
                </el-dialog>

                <!-- 正常预览 -->
                <el-button type="success" @click="lookComponents">正常预览</el-button>
                <el-dialog v-model="dialogComponents" title="正常预览">
                    <div v-for="(item, index) in toolStore.componentsList"
                        :style="{ ...stylePx(item.style), zIndex: item.index, position: 'absolute' }" :id="item.id + 'ani'"
                        :key="index" @click="events">
                        <component :is="item.component" :propLable="item.propLable" :id="item.id"></component>
                    </div>
                </el-dialog>

                <!-- 撤销 -->
                <el-button type="danger" @click="backOut">撤销</el-button>
                <!-- 智能抠图 -->
                <el-button type="warning" @click="cutOut">智能抠图</el-button>
                <el-dialog v-model="cutOutVisible" title="智能抠图">
                    <el-upload action="#" :auto-upload="false" :on-change="uploadImg" list-type="picture-card"
                        accept=".png,.jpg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-row :gutter="20">
                        <el-col :span="12" v-if="orginImg">
                            <h2>原图：</h2>
                            <img @load="imgLoad" :src="orginImg" :style="{ height: '200px', width: '300px' }"
                                fit="contain" />
                        </el-col>
                        <el-col :span="12" v-loading="loading">
                            <h2>抠图结果：</h2>
                            <div ref="html" @click="changeColor">

                            </div>
                        </el-col>
                    </el-row>
                </el-dialog>

                <el-button @click="home">返回主页</el-button>
            </div>
        </el-space>
    </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { userCanvasStore, userToolbarStore } from '../../store';
import html2canvas from 'html2canvas'
import { stylePx } from '../../utils';
import imglyRemoveBackground from "@imgly/background-removal";

const html = ref(null)
const store = userCanvasStore()
const toolStore = userToolbarStore()
const dialogVisible = ref(false)
const dialogComponents = ref(false)
// 抠图默认不显示
const cutOutVisible = ref(false)
const img = ref("")

const home = () => {
    window.location.href = "/home/tuijian"
}

// canvas预览
const lookCanvas = () => {
    dialogVisible.value = true
    html2canvas(document.getElementById("canvas_box"), {
        width: 700,
        height: 400,
        useCORS: true
    }).then(canvas => {
        img.value = canvas.toDataURL()
    })
}

// 预览组件
const lookComponents = () => {
    dialogComponents.value = true
    let timer = null
    nextTick(() => {
        toolStore.componentsList.forEach((item) => {
            const html = document.getElementById(item.id + "ani")
            item.style.animate.forEach((itemChild, index) => {
                timer = setTimeout(() => {
                    html.className = `animated ${itemChild.value}`
                }, index * 2000);
            })
        })
    })
}

// 执行事件
const events = () => {
    toolStore.componentsList.forEach((item) => {
        item.event.forEach((itemChild) => {
            switch (itemChild.type) {
                case "alert":
                    alert(itemChild.val)
                    break;
                case "redirect":
                    location.href = itemChild.val
                    break;
                default:
                    break;
            }
        })
    })
}

// 撤销
const backOut = () => {
    //    console.log(toolStore.backOutList)
}

// 智能抠图
const cutOut = () => {
    cutOutVisible.value = true
}

// 选择图片
const orginImg = ref("");
const uploadImg = (file) => {
    // 拿到本地图片地址
    orginImg.value = file.url;
};
const loading = ref(false)

// 图片加载成功
const canvasHtml = ref(null)
const imgLoad = (ev) => {
    const width = ev.target.width
    const height = ev.target.height
    const cavHtml = document.createElement('canvas')
    cavHtml.width = width
    cavHtml.height = height
    canvasHtml.value = cavHtml.getContext('2d')

    if (canvasHtml.value) {
        canvasHtml.value.drawImage(ev.target, 0, 0, 300, 200)
    }
    html.value.appendChild(cavHtml)
}

// 改变图片颜色
const changeColor = (ev) => {
    const X = ev.pageX - ev.offsetX
    const Y = ev.pageY - ev.offsetY
    // 点击时候的色值
    const clickColor = canvasHtml.value.getImageData(X, Y, 1, 1).data
    // 全部的颜色
    const allColor = canvasHtml.value.getImageData(0, 0, 300, 200)

    const [r, g, b, a] = clickColor
    const data = allColor.data
    for (let i = 0; i < data.length; i = i + 4) {
        if (Math.abs(data[i] - r) <= 200 && Math.abs(data[i + 1] - g) <= 200 && Math.abs(data[i + 2] - b) <= 200) {
            data[i + 3] = 0
        }
    }
    canvasHtml.value.putImageData(allColor, 0, 0)
}
</script>

<style>
.el-dialog {
    width: 80%;
    position: relative;
    min-height: 700px;
}

.canvas_img {
    width: 70%;
    height: 70%;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}
</style>